
import React, { Component } from 'react'
import axios from 'axios'
import Macy from 'macy' //引入瀑布流插件
import withrouter from '../utils/withrouter'
class Home extends Component {
  state = {
      arr:[]
  }
  componentDidMount() {
      console.log(this.props,111);
        axios.get("/list").then(res=>{
            this.setState({
                arr:res.data
            },()=>{ // 这个回调函数等页面渲染完毕后才执行
                this.getMacy()
            })
        })
  }
  goDetai() {
      this.props.router("/detail")
  }
  getMacy = ()=>{
     if (this.state.masonry) { // 这个状态是插件强行插入到组件得state中的
        this.state.masonry.reInit();
     } else {
         let masonry = new Macy({
            container: '.macy-container',
            trueOrder: false,
            waitForImages: false,
            useOwnImageLoader:false,
            debug:true,
            margin: {
                x: 10,
                y: 16  
            },
            columns: 2
         })
         this.setState({masonry})
     }
  }
  render() {
    return (
      <div>
          <div className='macy-container'>
            {
                this.state.arr && this.state.arr.length ? this.state.arr.map((item,index)=>{
                        return <div key={index} onClick={this.goDetai.bind(this)}>
                            <img src={item.img} alt="" />
                            <p>{item.tit}</p>
                        </div>
                }):"暂无数据"
            }
          </div>
         
      </div>
    )
  }
}

export default withrouter(Home)